<template>
   <!--搜索栏-->
   <el-row class="search">
      <el-form :model="search" ref="searchRef" :inline="true">
         <el-form-item label="订单编号">
            <el-input v-model="search.orderCode" clearable/>
         </el-form-item>
      </el-form>
   </el-row>
   <!--工具栏-->
   <el-row class="toolbar">
      <el-button type="primary" icon="Search" @click="mSearchData">搜索</el-button>
   </el-row>
   <!--表格数据-->
   <el-row class="showData">
      <el-table ref="tableRef" :data="table.data" border row-key="id" v-loading="table.showLoading">
         <!-- 序号 -->
         <el-table-column width="60" label="序号" align="left" type="index"
                          fixed="left"></el-table-column>
         <!-- 数据列 -->
         <template v-for="(item, index) in table.column">
            <el-table-column :prop="item.prop" :label="item.label"
                             :show-overflow-tooltip="true"></el-table-column>
         </template>
         <!-- 操作列 -->
         <el-table-column label="操作" align="left" fixed="right" width="150">
            <template #default="scope">
               <el-button type="primary" link @click="mShowDialog(scope.row)">
                  详情
               </el-button>
               <el-button type="primary" link v-if="scope.row.isSend=='是' && scope.row.isReceive=='否'"
                          @click="mConfirmReceive(scope.row)">
                  确认收货
               </el-button>
            </template>
         </el-table-column>
      </el-table>
   </el-row>
   <!--分页栏-->
   <el-row class="pager">
      <el-pagination background :layout="pager.layout" :current-page="pager.pageIndex"
                     :page-size="pager.pageSize" :total="pager.rowCount"
                     @current-change="mPageIndexChange"></el-pagination>
   </el-row>

   <div>
      <order-dlg ref="orderDlg"></order-dlg>
   </div>
</template>
<script>
import axiosUtil from '@/utils/axiosUtil'
import OrderDlg from "@/viewsClient/order/orderDlg";

export default {
   components: {
      OrderDlg
   },
   data() {
      return {
         //搜索条件数据定义
         search: {
            orderCode: '',
         },
         //表格数据和表格展示列定义
         table: {
            data: [],
            column: [
               {'prop': 'orderCode', 'label': '订单编号'},
               {'prop': 'orderDate', 'label': '下单时间'},
               {'prop': 'totalMoney', 'label': '订单总金额'},
               {'prop': 'receiveUser', 'label': '收货人'},
               {'prop': 'receivePhone', 'label': '收货电话'},
               {'prop': 'receiveAddress', 'label': '收货地址'},
               {'prop': 'isPay', 'label': '是否付款'},
               {'prop': 'isSend', 'label': '是否发货'},
               {'prop': 'sendNo', 'label': '物流单号'},
               {'prop': 'isReceive', 'label': '是否收货'},
            ],
            showLoading: false
         },
         //表格分页数据定义
         pager: {
            pageIndex: 1,
            pageSize: 10,
            layout: 'total, prev, pager, next, jumper',
            rowCount: 0,
         }
      }
   },

   methods: {
      //显示对话框，通过调用子组件内的方法实现
      mShowDialog(row) {
         this.$refs["orderDlg"].mShowDialog(row)
      },
      //搜索数据
      mSearchData() {
         axiosUtil.get({
            url: '/orderInfo/getTable',
            data: {
               ...this.search,
               pageIndex: this.pager.pageIndex,
               pageSize: this.pager.pageSize
            },
            success: res => {
               this.table.data = res.data.table;
               this.pager = res.data.pager;
            }
         })
      },
      //确认收货
      mConfirmReceive(row) {
         this.$confirm('确认收货后订单将完成，是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
         }).then(() => {
            axiosUtil.postForm({
               url: '/orderInfo/confirmReceive',
               data: {
                  orderCode: row.orderCode
               },
               success: res => {
                  this.$message.info('确认收货成功');
                  this.mSearchData();
               }
            })
         }).catch(() => {
            this.$message.info('已取消');
         });
      },
      //换页切换
      mPageIndexChange(val) {
         this.pager.pageIndex = val
         this.mSearchData()
      }
   },
   created() {
      //搜索订单数据
      this.mSearchData();
   }
}
</script>
<style scoped>
.search {
   display: flex;
   flex-wrap: wrap;
}

.search .el-form-item {
   margin-bottom: 0px;
}

.search input {
   width: 200px;
}

.toolbar {
   display: flex;
   justify-content: right;
   margin-bottom: 5px;
}

.pager {
   display: flex;
   justify-content: center;
}
</style>
